<template>
<img src="./index.jpg" alt="" style="width: 100% ;height: 100%">
  <!-- <div class='big-screen-wrapper'>
    <div class='title-wrapper'>
      <div class='title'>项目合同签订滞后检查模型</div>
      <div class='category'>
        <a-select
          show-search
          v-model='selectProject'
          @change='handleProjectChange'
        >
          <a-select-option value='1'>
            项目1
          </a-select-option>
          <a-select-option value='2'>
            项目2
          </a-select-option>

        </a-select>
      </div>
    </div>
    <div class='content-wrapper'>
      <div class='left-wrapper'>
        <div class='left-wrapper-1'>
          <div class='chart-title'>合同执行情况统计...</div>
          <chartStackBar
            v-if='leftWrapper1'
            :sourceChartOption='leftWrapper1'
          ></chartStackBar>
        </div>
        <div class='left-wrapper-2'>
          <div class='chart-title'>合同总体情况(金额)...</div>
          <chartHalfPie
            v-if='leftWrapper2'
            :sourceChartOption='leftWrapper2'
          ></chartHalfPie>
        </div>
        <div class='left-wrapper-3'>
          <div class='chart-title'>合同总体情况(数量)...</div>
          <chartPie
            v-if='leftWrapper3'
            :sourceChartOption='leftWrapper3'
          ></chartPie>
        </div>
      </div>
      <div :class="'middle-wrapper'">
        <div class='middle-wrapper-1'>
          <div class='content-wrapper'>
            <div class='item item1'>
              <span>施工日志</span>
              <span>{{ middleWrapper1.logCount }}</span></div>
            <div class='item item2'>
              <span>分包合同</span>
              <span>{{ middleWrapper1.fbCount }}</span></div>
            <div class='item item3'>
              <span>租赁合同</span>

              <span>{{ middleWrapper1.zlCount }}</span></div>
            <div class='item item4'>
              <span>设备进场单</span>

              <span>{{ middleWrapper1.equiptCount }} </span></div>
            <div class='item item5'>
              <span>物资采购合同</span>

              <span>{{ middleWrapper1.wzCount }}</span></div>
            <div class='item item6'>
              <span>设备进场单</span>

              <span>{{ middleWrapper1.goodsCount }}</span></div>
          </div>
        </div>
        <div class='middle-wrapper-2'>
          <div style='display: flex;align-items: center;justify-content: flex-start'>
            <div
              style="width: 100px;height: 40px;
            line-height:40px;
            text-align: center;
            background: rgba(71,255,234,0.24);
            border-top-right-radius: 10px;
            border:1px solid #27fdfd;
            color: #f5aa5e;font-weight: bold">
              全部合同 {{count}}
            </div>
            <div
              style="width: 100px;height: 40px;
            line-height:40px;
            text-align: center;
            background: rgba(71,255,234,0.24);
            border-top-right-radius: 10px;
            border:1px solid #27fdfd;
            color: #0BF4ED;font-weight: bold">
              滞后合同 {{count}}
            </div>
          </div>
          <a-table :columns='middleWrapper2Cols' :data-source='middleWrapper2Data' :pagination='false'
          style='border: 1px solid rgb(39, 253, 253);'
          >
          </a-table>
        </div>
      </div>
      <div :class="'right-wrapper'">
        <div class='right-wrapper-1'>
          <div class='chart-title'>物资点收信息</div>
          <a-table :columns='rightWrapper1Cols' :data-source='rightWrapper1Data' :pagination='false'>
          </a-table>
        </div>
        <div class='right-wrapper-2'>
          <div class='chart-title'>设备进场信息...</div>
          <a-table :columns='rightWrapper2Cols' :data-source='rightWrapper2Data' :pagination='false'>
          </a-table>
        </div>
        <div class='right-wrapper-3'>
          <div class='chart-title'>施工日志...</div>
          <a-table :columns='rightWrapper3Cols' :data-source='rightWrapper3Data' :pagination='false'>
          </a-table>
        </div>
      </div>
    </div>
  </div> -->
</template>

<script>
import { chartPie, chartLine, chartStackLine, chartStackBar,chartHalfPie } from '@/components/BaseCharts/index'
import { axios } from '@/utils/request'
import * as lodash from 'lodash'

export default {
  name: 'index',
  components: { chartPie, chartLine, chartStackLine, chartStackBar,chartHalfPie },
  data() {
    return {
      selectProject: '1',
      leftWrapper1: {
        chartType: 'chartBar',
        refID: `rightWrapper1`,
        text: '',
        subText: '',
        xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        series: [
          { name: '审计项目计划数', data: [120, 132, 101, 134, 90, 230, 120, 132, 101, 134, 90, 230], notStack: false },
          { name: '实际实施数', data: [220, 182, 191, 234, 290, 330, 220, 182, 191, 234, 290, 330], notStack: false }
        ]
      },
      leftWrapper2: {
        chartType: 'chartPie',
        refID: `chartPie1`,
        text: '',
        subText: '',
        series: [
          { data: [24], name: '类别1' },
          { data: [36], name: '类别2' },
          { data: [8], name: '类别3' },
          { data: [32], name: '类别4' }
        ]
      },
      leftWrapper3: {
        chartType: 'chartPie',
        refID: `chartPie1`,
        text: '',
        subText: '',
        series: [
          { data: [24], name: '类别1' },
          { data: [36], name: '类别2' },
          { data: [8], name: '类别3' },
          { data: [32], name: '类别4' }
        ]
      },
      middleWrapper1: {
        'logCount': '14',
        'goodsCount': '6',
        'equiptCount': '6',
        'zlCount': 3,
        'wzCount': 3,
        'fbCount': 2
      },
      rightWrapper1Cols: [
        {
          title: '物资名称',
          dataIndex: 'goodsName'
        },
        {
          title: '点收时间',
          dataIndex: 'receiveTime'
        }
      ],
      rightWrapper1Data: [],
      rightWrapper2Cols: [
        {
          title: '设备名称',
          dataIndex: 'equipmentName'
        },
        {
          title: '进场时间',
          dataIndex: 'approachTime'
        }
      ],
      rightWrapper2Data: [],
      rightWrapper3Cols: [
        {
          title: '工作名称',
          dataIndex: 'teamName'
        },
        {
          title: '进场时间',
          dataIndex: 'buildStartTime'
        },
        {
          title: '条数',
          dataIndex: 'buildLogCount'
        }
      ],
      rightWrapper3Data: [],
      middleWrapper2Cols: [
        {
          title: '序号',
          dataIndex: 'id'
        },
        {
          title: '合同名称',
          dataIndex: 'contractName'
        },
        {
          title: '合同类型',
          dataIndex: 'contractType'
        },
        {
          title: '延迟',
          dataIndex: 'isLagZh'
        }
      ],
      middleWrapper2Data: []
    }
  },
  created() {
    this.fetchLeft1()
    this.fetchLeft2()
    this.fetchLeft3()
    this.fetchMiddle1()
    this.fetchMiddle2()
    this.fetchRight1()
    this.fetchRight2()
    this.fetchRight3()
  },
  methods: {
    deepCopy(data) {
      return JSON.parse(JSON.stringify(data))
    },
    getRandom(arr) {
      let dp = [...arr]
      return dp.sort(() => Math.random() - 0.5)
    },
    handleProjectChange() {
      const leftWrapper1 = this.deepCopy(this.leftWrapper1)
      leftWrapper1.series = this.getRandom(leftWrapper1.series)
      this.leftWrapper1 = null

      setTimeout(() => {
        this.leftWrapper1 = leftWrapper1
      }, 100)

      const leftWrapper2 = this.deepCopy(this.leftWrapper2)
      leftWrapper2.series = this.getRandom(leftWrapper2.series)
      this.leftWrapper2 = null

      setTimeout(() => {
        this.leftWrapper2 = leftWrapper2
      }, 100)

      const leftWrapper3 = this.deepCopy(this.leftWrapper3)
      leftWrapper3.series.forEach(item => {
        item.data = this.getRandom(item.data)
      })

      this.leftWrapper3 = null
      setTimeout(() => {
        this.leftWrapper3 = leftWrapper3
      }, 100)

      const leftWrapper4 = this.deepCopy(this.leftWrapper4)
      leftWrapper4.series.forEach(item => {
        item.data = this.getRandom(item.data)
      })

      this.leftWrapper4 = null
      setTimeout(() => {
        this.leftWrapper4 = leftWrapper4
      }, 100)
    },

    async fetchLeft1() {
      const ret = await axios.get('/modelContractInfo/querBarData?projectId=510b33a7d056b8f93c0162d2038ff908')
      let { result } = ret
      const dataShadow = lodash.cloneDeep(this.leftWrapper1)
      dataShadow.xAxis = result.reduce((acc, cur) => {
        acc.push(cur.contractType)
        return acc
      }, [])
      dataShadow.series[0] = {
        name: '正常',
        data: result.reduce((acc, cur) => {
          acc.push(cur.isTLag)
          return acc
        }, [])
      }
      dataShadow.series[1] = {
        name: '疑似滞后',
        data: result.reduce((acc, cur) => {
          acc.push(cur.isTLag)
          return acc
        }, [])
      }
      this.leftWrapper1 = null
      setTimeout(() => {
        this.leftWrapper1 = dataShadow
      }, 100)
    },

    async fetchLeft2() {
      const ret = await axios.get('/modelContractInfo/queryContractTypeAmount?projectId=510b33a7d056b8f93c0162d2038ff908')
      let { result } = ret
      const dataShadow = lodash.cloneDeep(this.leftWrapper2)
      dataShadow.series = result.reduce((acc, cur) => {
        acc.push({ data: [cur.contractTypeAmount], name: cur.contractType })
        return acc
      }, [])
      this.leftWrapper2 = null
      setTimeout(() => {
        this.leftWrapper2 = dataShadow
      }, 100)
    },

    async fetchLeft3() {
      const ret = await axios.get('/modelContractInfo/queryContractTypeNum?projectId=510b33a7d056b8f93c0162d2038ff908')
      let { result } = ret
      const dataShadow = lodash.cloneDeep(this.leftWrapper3)
      dataShadow.series = result.reduce((acc, cur) => {
        acc.push({ data: [cur.contractTypeNum], name: cur.contractType })
        return acc
      }, [])
      this.leftWrapper3 = null
      setTimeout(() => {
        this.leftWrapper3 = dataShadow
      }, 100)
    },
    async fetchMiddle1() {
      const ret = await axios.get('/modelContractInfo/queryCount?projectId=510b33a7d056b8f93c0162d2038ff908')
      this.middleWrapper1 = ret.result[0]
    },
    async fetchMiddle2() {
      const ret = await axios.get('/modelContractInfo/queryAllContractList?projectId=510b33a7d056b8f93c0162d2038ff908')
      ret.result.records.forEach(item => {
        item.isLagZh = item.isLag ? '是' : '否'
      })
      this.middleWrapper2Data = ret.result.records

    },
    async fetchRight1() {
      const ret = await axios.get('/modelContractInfo/queryGoodsList?projectId=510b33a7d056b8f93c0162d2038ff908')
      ret.result.forEach(item => {
        item.isLagZh = item.isLag ? '是' : '否'
      })
      this.rightWrapper1Data = ret.result

    },
    async fetchRight2() {
      const ret = await axios.get('/modelContractInfo/queryEquiptInfoList?projectId=510b33a7d056b8f93c0162d2038ff908')
      ret.result.forEach(item => {
        item.isLagZh = item.isLag ? '是' : '否'
      })
      this.rightWrapper2Data = ret.result

    },
    async fetchRight3() {
      const ret = await axios.get('/modelContractInfo/queryBuildLogList?projectId=510b33a7d056b8f93c0162d2038ff908')
      ret.result.forEach(item => {
        item.isLagZh = item.isLag ? '是' : '否'
      })
      this.rightWrapper3Data = ret.result

    }

  }
}
</script>

<style scoped lang='less'>
.ant-table-wrapper {
  width: 100%;
  background: transparent;

  ::v-deep {
    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
      background: rgba(255, 255, 255, 0.4);
      color: black !important;
    }
    .ant-table-body {
      color: white;
    }

    .ant-table-placeholder {
      background: transparent;
      border: none;

      * {
        color: white;
      }
    }

    .ant-spin-nested-loading {
      width: 100%;

      th, td {
        border-bottom: none;
      }

      .ant-table-thead {
        background-color: rgba(48, 106, 117, 0.6);
        height: 30px;
        line-height: 0.3;
        color: white;

        * {
          background: transparent;
          color: white;
        }
      }
    }
  }

}

.chart-title {
  background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-top: 0.2vw;
  margin-left: 0.2vw;
  font-size: 0.8vw;
  font-weight: bold;
  left: 0;
  top: 0;
}

.big-screen-wrapper {
  width: 100%;
  height: calc(100%);
  background: url(~@/assets/hgxjc/lwdwyj/bg.png) no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-content: flex-start;
  justify-content: center;
  flex-direction: column;

  .title-wrapper {
    background: url(~@/assets/hgxjc/lwdwyj/title1.png) no-repeat;
    background-size: contain;
    position: relative;
    width: 100%;
    height: 110px;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    flex-direction: column;
    padding-top: 1vw;
    flex-shrink: 0;

    & > * {
      text-align: center;
      font-size: 1vw;
      background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      font-weight: bold;
    }

    & > .title {
      font-size: 1.3vw;
    }

    & > .category {
      margin-top: 0.1vw;

      /deep/ * {
        background: transparent !important;
        border: none !important;
        background-image: linear-gradient(95deg, #99e0c8, #13D4D5) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
      }
    }
  }

  .content-wrapper {
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;

    color: white;
    font-size: 0.3vw;
    &>div{
      background-image: linear-gradient(95deg, #99e0c8, #13D4D5) !important;
      background-clip: text !important;
      -webkit-background-clip: text !important;
      color: transparent !important;
      font-weight: bold;
    }

    .item1 {
      position: absolute;
      top: -2.4vh;
      left: 1.6vw;
    }

    .item2 {
      position: absolute;
      top: 7vh;
      left: 7vw;
    }

    .item3 {
      position: absolute;
      top: -1.8vh;
      left: 13.5vw;
    }

    .item4 {
      position: absolute;
      top: -1.8vh;
      left: 24.5vw;
    }

    .item5 {
      position: absolute;
      top: 6.8vh;
      left: 30.5vw;
    }

    .item6 {
      position: absolute;
      top: -2.6vh;
      left: 36vw;
    }

    & > div {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      &.middle-wrapper1 {
        flex: 1.5;

        background: url(~@/assets/hgxjc/lwdwyj/middle.png) no-repeat;
        background-size: contain;
        background-position: center center;
        position: relative;
      }

      &.right-wrapper1 {
        background: url(~@/assets/hgxjc/lwdwyj/right.png) no-repeat;
        background-size: contain;
        position: relative;
        background-position: center center;
      }

      &.middle-wrapper2 {
        flex: 1.5;
        background: url(~@/assets/hgxjc/lwdwyj/middle2.png) no-repeat;
        background-size: contain;
        background-position: center center;
        position: relative;
      }

      &.right-wrapper2 {
        background: url(~@/assets/hgxjc/lwdwyj/right2.png) no-repeat;
        background-size: contain;
        position: relative;
        background-position: center center;
      }

      &.left-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-left: 16px;
        height: 100%;
        flex-shrink: 0;
        &>div{
          margin: 4px 0;
          background-color: rgba(78, 78, 78, 0.3);
        }

        .chart-title {
          background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
          margin-top: 0.2vw;
          margin-left: 0.2vw;
          font-size: 0.8vw;
          font-weight: bold;
          position: absolute;
          left: 0;
          top: 0;
        }

        & > div {
          width: 100%;
          height: 100%;
          flex: 1;
          flex-shrink: 0;
          position: relative;

        }
      }

      &.right-wrapper {
        flex: 1;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        height: 100%;
        overflow-y: hidden;
        &>div{
          margin: 4px 0;
          background-color: rgba(78, 78, 78, 0.3);
        }

        & > div {
          flex-shrink: 0;
          flex: 1;
          width: 100%;
          height: 33%;
          overflow-y: scroll;
        }
      }

      &.middle-wrapper {
        flex: 1.5;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        & > div {
          width: 100%;
        }

        .middle-wrapper-1 {
          flex: 1;
          background: url(~@/assets/htqdzhmx/middleBorder.png) no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          width: 100%;
          padding: 0 20px;

          .content-wrapper {

            background: url(~@/assets/htqdzhmx/模型框框.png) no-repeat;
            background-size: contain;
            background-position: center;
            .item{
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              span:nth-child(2){
                color: #ed9909;
              }
            }

          }
        }

        .middle-wrapper-2 {
          flex: 2;
        }
      }
    }
  }
}
</style>